<template>
    <el-row class="DBLoad-box">
      <el-col :span="24" class="DBLoad-page">
        <div id="DbLoad" ref="DbLoad" class="linePage"></div>
      </el-col>
      <el-col :span="24" class="DBLoad-file">
          <span class="LoadFile">db time ：{{this.DBTime? this.DBTime: '0'}} </span>
      </el-col>
    </el-row>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'DBtimeLine',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "",
                    "pointNum":"30"
                },
            },
            DBTime: '',
            DBTimeDate : this.DBTimeDateTest(),
            DbLoad: {},
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '14%',
                    right: '5%',
                    height: '83%',
                    width: '70%',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                        lineStyle: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLable:{
                        show: false
                    },
                    data: this.testData(),
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    boundaryGap: ['5%', '5%'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            opacity: 0.4,
                            type: 'dotted',
                            color: 'rgb(145, 199, 174)',
                        }
                    },
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                series: [{
                    name: 'DB负载',
                    data: this.DBTimeDate,
                    type: 'line',
                    color: 'rgb(194, 131, 213)',
                    showSymbol: false,
                }]
            },
            timerName: 'DbLoad',
            timerEventName: 'timerDbLoad',
            timerInterval: 1000 * 3
        }
    },
    created() {
        bus.$on('selectedMonID', msg => {


            // 获取数据
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedDBMonID;
            this.initGetData();
			setInterval(()=>{
				this.getData();
			},10000)
            
        });
        
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
                this.getData();
                this.DBTimeDate.shift();
                this.DBTimeDate.push(this.DBTime);
                this.EChartsOption.xAxis.data.shift();
                this.EChartsOption.xAxis.data.push(axisData);
                this.DbLoad.setOption({
                    xAxis: {
                        data: this.EChartsOption.xAxis.data
                    },
                    series: {
                        data: this.DBTimeDate
                    }
                })
            }
        });
    },
    mounted() {
        this.DbLoad = this.$echarts.init(this.$refs.DbLoad);
        this.drawCPULine();
        window.onresize= () =>{
            let myEchart = this.$echarts.init(this.$refs.DbLoad);
            myEchart.resize();
        }
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        initGetData(){
            let _postData = {
                opera: 'DBtimeLine',
                filters: {
                    "monid": this.postData.filters.monid,
                    "pointNum":"30"
                },
            };
            fetchData({
                postData : JSON.stringify(_postData)
            }).then((res) => {

                let _DBTime = [];
                let _str = [];
                // this.cpuData.push(res.CPU_USER * 100);
                for (let i = 0; i < res.data.length; i++) {
                    _DBTime.push(res.data[i].DBTIME);
                    _str.push(res.data[i].END_INTERVAL_TIME);
                }
                this.DBTimeDate = _DBTime;
                this.EChartsOption.xAxis.data = _str;
            });
        },
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
				console.log(res)
                if (res.data.length > 0 && res.data[0].DBTIME != null) {
                    this.DBTime = res.data[0].DBTIME;
                    this.DBTimeDate.push(res.data[0].DBTIME);
                    let _str = res.data[0].END_INTERVAL_TIME.replace(/\s+/g,"\n");
                    this.EChartsOption.xAxis.data.push(_str);
                }
                else {
                    this.DBTime = '';
                };
            });
        },
        drawCPULine(){
            this.DbLoad.setOption(this.EChartsOption);
        },
        testData() {
            let _arr = [];
            for (let i = 0; i < 30; i++) {
                _arr.push('');
            }
            
            return _arr;
        },
        DBTimeDateTest() {
            let _arr = new Array(30);
            
            return _arr;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
        
        this.DbLoad.dispose();
    }
}
</script>
<style scoped>
.DBLoad-box{
    height: 100%;
}
.DBLoad-page{
    height: 75%;
    width: 100%;
}
.linePage{
    height: 100%;
    width: 100%;
}
.DBLoad-file{
    height: 23%;
    width: 100%;
    text-align: center;
    margin-top: 5%;
}
</style>